﻿@{
    Layout = "_LayoutAdmin";
}

@model IReadOnlyList<Moonglade.Model.CustomPageSegment>

@section scripts{
    <script>
        $(function () {
            $(".btn-delete").click(function () {
                var cfm = confirm("Delete Confirmation?");
                if (cfm) {
                    deletePage($(this).data("pageid"), $(this).data("slug"));
                }
            });
        });

        function deletePage(pageid, slug) {
            $(`#span-processing-${pageid}`).show();
            ajaxPostWithCSRFToken("manage/delete", { pageid: pageid, slug: slug }, function (data) {
                $(`#card-${data}`).hide();
            });
        }
    </script>
}

<h3>
    @Localizer["Pages"]
    <a class="btn btn-outline-success float-right" asp-controller="CustomPage" asp-action="Create">
        <span class="icon-plus"></span>
        @Localizer["New"]
    </a>
</h3>
<hr />


@if (Model.Any())
{
    @Html.AntiForgeryToken()

    <div class="card-columns card-columns-pages">
        @foreach (var customPage in Model.OrderByDescending(p => p.CreateOnUtc))
        {
            <div class="card mb-4" id="card-@customPage.Id">
                <div class="card-body">
                    <h6 class="card-title">
                        @customPage.Title
                    </h6>
                    <p class="mt-2 h-30px">@customPage.RouteName</p>
                    <small class="text-muted">
                        @customPage.CreateOnUtc
                    </small>
                </div>
                <div class="card-footer">
                    <a class="btn btn-primary btn-sm btn-edit" asp-controller="CustomPage" asp-action="Edit" asp-route-id="@customPage.Id">
                        <span class="icon-pencil"></span>
                    </a>
                    <a class="btn btn-danger btn-sm btn-delete" data-pageid="@customPage.Id" data-slug="@customPage.RouteName" href="javascript:;">
                        <span class="icon-bin"></span>
                    </a>
                    <span id="span-processing-@customPage.Id" style="display: none">...</span>
                </div>
            </div>
        }
    </div>
}
else
{
    <div class="empty-recycle">
        <div class="text-center">
            <h4>@Localizer["No Pages"]</h4>
            <p class="text-muted">@Localizer["no items to show"]</p>
        </div>
    </div>
}
